<template>
	<view class="container">
		<custom-nav-bar bgc="#ffc0cb"></custom-nav-bar>
		<scroll-view :scroll-y="true" class="main">
			<!-- 引入自定义导航栏 -->
			<home-swiper :swiperList="swiperList"></home-swiper>
			<!-- 首页推荐区域 -->
			<home-recom :recommList="recommList" title="热门商品" icon="icon-aixin">
				<i class="iconfont icon-aixin" style="font-size: 60rpx;"></i>
			</home-recom>
			<!--首页商品信息-->
			<home-product :productList="productList" :titleColors="['#f00','#0f0','#00f']"></home-product>
		</scroll-view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				swiperList: [],
				recommList: [],
				productList: []
			}
		},
		methods: {
			async getSwiperData() {
				//await uni.$api.模块名.方法名()
				const result = await uni.$api.home.getSwiperApi()
				this.swiperList = result.data.data
			},
			async getRecomData() {
				const result = await uni.$api.home.getRecomApi()
				this.recommList = result.data.data
			},
			async getGoodsLevel() {
				const result = await uni.$api.home.getGoodsLevelApi()
				this.productList = result.data.data;
			}
		},
		onLoad() {
			this.getSwiperData()
			this.getRecomData()
			this.getGoodsLevel()
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;
		.main{
			height: calc(100vh - 60px);
		}
	}
</style>